<template>
  <div class="banner" @mouseout="StartChange" @mouseover="StopChange">
    <div class="left" @click="PreImage"></div>
    <div class="right" @click="NextImage"></div>
        <a href="https://www.4399.com/" v-for="(item, index) in banner_image" :key="index">
          <div :class="['image_hidden', banner_index===index + 1?'image_show':'']">
            <img alt="wu" :src="item.imgUrl">
          </div>
        </a>
    <div class="dots">
      <span v-for="(item, index) in banner_size" :key="index" :class="item===banner_index?'DotActive':''" @click="DotsChange(item)"></span>
    </div>
  </div>


</template>

<script>
export default {
  name: "RotationChart1",
  data() {
    return {
      timer:null,
      banner_index:1,
      banner_size:4,
      banner_image:[
        {imgUrl:'../../public/1/搭房子.jpg'},
        {imgUrl: '../../public/1/火柴人.jpg'},
        {imgUrl: '../../public/1/猫鼠大战.jpg'},
        {imgUrl: '../../public/1/鳄鱼洗澡.jpg'}
      ]
    }
  },
  methods:{
    PreImage() {
      this.StopChange();
      if(this.banner_index === 1) this.banner_index = 4;
      else this.banner_index--;
      this.StartChange();
    },
    NextImage() {
      this.StopChange();
      if (this.banner_index === 4) this.banner_index = 1;
      else this.banner_index++;
      this.StartChange();
    },
    StartChange() {
      let temp = this;
      temp.timer = setInterval(function () {
        temp.banner_index++;
        if (temp.banner_index > temp.banner_size) {
          temp.banner_index = 1;
        }
      },4000);
    },

    StopChange() {
      if(this.timer) {
        clearInterval(this.timer);
      }
    },

    DotsChange(index) {
      this.StopChange();
      this.banner_index = index;
      this.StartChange();
    }
  },
  mounted() {
    this.StartChange();
  }
}
</script>

<style scoped>
.banner {
  left: 5%;
  width: 90%;
}

img {
  margin-left: 5.5%;
  width: 100%;
}

.image_hidden {
  display: none;
}

.image_show {
  display: block;
}

.left {
  width: 40px;
  height: 60px;
  position: absolute;
  top: 28%;
  left: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}


.dots {
  float:bottom;
  margin-left: 800px;
  top: 59%;
  right: 7%;
}

span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(7, 17, 27, 0.4);
  margin-left: 8px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.DotActive {
  background-color: #fff;
  box-shadow: inset 0 0 0 2px rgba(7, 17, 27, 0.4);
}
</style>